<script setup>
import {ref} from 'vue'
import {User, Iphone, Lock, Edit} from '@element-plus/icons-vue'
import { supplierTokenStore,useTokenStore } from "@/store/tokenStore.js";
import {register} from '@/api/supplier'
import {supplierLogin} from '@/api/login.js'
import {useRouter} from "vue-router"

const router = useRouter()
// do not use same name with ref
const registerForm = ref({
  boosName: "",
  phone: "",
  pwd: "",
  introduction: ""
})
const loginForm = ref({
  phone: "",
  pwd: ""
})

const supplierToken =supplierTokenStore()
const isRegister = ref(false)
const onSubmit = async () => {
  let response = await register(registerForm.value);
  console.log(response)
}
const onLogin = async () => {
  var response = await supplierLogin(loginForm.value);
  //供应商身份登录，自动去除用户身份
  useTokenStore().clearToken()
  supplierToken.setSupplierToken(response)
  router.push('/control')
}
</script>
<template>
  <el-form ref="form" :model="registerForm" v-if="isRegister" label-width="120px" style="max-width: 600px">
    <el-form-item label="供应商商家名">
      <el-input :prefix-icon="User" v-model="registerForm.boosName" placeholder="请输入供应商商家名"/>
    </el-form-item>
    <el-form-item label="联系电话">
      <el-input :prefix-icon="Iphone" v-model="registerForm.phone" placeholder="请输入供应商联系电话"/>
    </el-form-item>
    <el-form-item label="密码">
      <el-input :prefix-icon="Lock" v-model="registerForm.pwd" type="password" placeholder="请输入密码"/>
    </el-form-item>
    <el-form-item label="简介">
      <el-input :prefix-icon="Edit" v-model="registerForm.introduction"
                type="textarea" placeholder="请输入简介"/>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">注册</el-button>
    </el-form-item>
    <el-form-item class="flex">
      <el-link type="info" :underline="false" @click="isRegister = false">
        ← 返回
      </el-link>
    </el-form-item>
  </el-form>
  <el-form v-else ref="form" :model="loginForm" label-width="120px" style="max-width: 600px">
    <el-form-item label="登录电话">
      <el-input :prefix-icon="Iphone" v-model="loginForm.phone" placeholder="请输入供应商联系电话"/>
    </el-form-item>
    <el-form-item label="密码">
      <el-input :prefix-icon="Lock" v-model="loginForm.pwd" type="password" placeholder="请输入密码"/>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onLogin">登录</el-button>
    </el-form-item>
    <el-form-item class="flex">
      <el-link type="info" :underline="false" @click="isRegister = true">
        注册 →
      </el-link>
    </el-form-item>
  </el-form>
</template>

<style scoped>
:deep(.el-form) {
  background: white;
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  width: 480px;
  margin: 100px auto;
}

:deep(.el-form-item) {
  margin-bottom: 28px;
}

:deep(.el-form-item__label) {
  font-size: 14px;
  color: #666;
}

:deep(.el-input) {
  width: 100%;
}

:deep(.el-input__wrapper) {
  border-radius: 8px;
  padding: 12px 16px;
}

:deep(.el-button) {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  font-size: 16px;
  margin-top: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
}

:deep(.el-button:hover) {
  opacity: 0.9;
}

:deep(.el-link) {
  font-size: 14px;
}

.flex {
  display: flex;
  justify-content: space-between;
}

body {
  background: url('/images.jpg') no-repeat center center fixed;
  background-size: cover;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  animation: fadeIn 1s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

:deep(.el-form) {
  background: rgba(255, 255, 255, 0.95);
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 4px 30px rgba(0,0,0,0.15);
  width: 480px;
  margin: 100px auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: slideUp 0.8s ease-in-out;
}

@keyframes slideUp {
  from {
    transform: translate(-50%, 20%);
    opacity: 0;
  }
  to {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
}
</style>
